<template>
    <div>
      <section>
        <div class="item">
          <div class="header">
            <div class="headerleft">
              <video
                src="https://v-shop.shuzp.top/v2/assets/media/shopping-cart.d222365e.mp4"
               
                type="vedio/mp4"
              ></video
              ><span>购物车</span>
            </div>
            <div class="headerright">编辑</div>
          </div>
          <div class="list" >
            <div class="check">
              <van-checkbox
              v-model="checked"
                checked-color="#1ba784"
                icon-size="20px"
              ></van-checkbox>
            </div>
            <img src="" alt="" />
            <div class="list-text">
              <div class="text-title"></div>
              <div class="desc"></div>
              <div class="text-bottom">
                <div class="text-price"><span>￥</span>11</div>
                <div class="num">
                  <button >-</button
                  ><input type="text"  /><button
                   
                    style="color: #323233"
                  >
                    +
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="fix">
          <div class="check">
            <van-checkbox
             v-model="checked"
              checked-color="#1ba784"
              icon-size="20px"
              >全选</van-checkbox
            >
          </div>
          <div class="allprice">
            <div class="bar-total">合计：</div>
            <div class="bar-price"><span>￥</span>0.00</div>
          </div>
          <button>去结算(0)</button>
        </div>
        <TabBar></TabBar>
      </section>
    </div>
  </template>
  <script lang="ts" setup>
  import Vue from 'vue'
  import TabBar from "@/components/TabBar.vue"
  import {ref} from "vue"
  const checked = ref(true);
  </script>
  <style scoped>
  section {
    width: 375px;
    background-color: #f7f8fa;
    height: calc(100vh-50px);
    padding-top: 3.2vw;
    box-sizing: border-box;
  }
  .item {
    width: 355px;
    height: 160px;
    margin: 0 2.67vw;
    background-color: #fff;
  }
  .header {
    width: 100%;
    padding: 0 15px;
    height: 40px;
    background-color: #fff;
    box-sizing: border-box;
    display: flex;
  }
  .headerleft {
    width: 50%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  video {
    width: 40px;
    height: 40px;
    margin-left: -2.67vw;
    border: none;
    background-color: #fff;
  }
  .headerleft span {
    font-size: 14px;
  }
  .headerright {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: #38f;
    font-size: 14px;
  }
  .list {
    width:355px;
    height: 106px;
    padding: 8px 15px;
    box-sizing: border-box;
    display: flex;
    justify-items: center;
    background-color: #fff;
    margin-top: 2.67vw;
  }
  .check {
    width:40px;
    height: 100%;
    display: flex;
    align-items: center;
  }
  .list img {
    width: 90px;
    height: 90px;
    margin-right: 2.67vw;
  }
  .list-text {
    width: 180px;
    height:90px;
  }
  .text-title {
    width: 100%;
    height: 18px;
    font-size: 14px;
    color: #323233;
  }
  .desc {
    width: 100%;
    height: 44px;
    line-height: 20px;
    font-size:12px;
    color: #969799;
  }
  .text-bottom {
    width: 100%;
    height: 28px;
    display: flex;
    justify-content: space-between;
  }
  .text-price {
    height: 100%;
    color: #1ba784;
    font-size: 18px;
  }
  .text-bottom span {
    font-size: 12px;
    color: #1ba784;
    margin-right: 2px;
  }
  .num {
    width: 92px;
    height: 28px;
    display: flex;
    justify-content: space-between;
  }
  .num button {
    width: 28px;
    height:28px;
    line-height: 28px;
    text-align: center;
    color: #c8c9cc;
    background-color: #f7f8fa;
    border-radius: 1.07vw 0 0 1.07vw;
    border: none;
    font-size: 40px;
  }
  .num input {
    width:32px;
    height: 28px;
    font-size: 3.73vw;
    color: #323233;
    line-height: normal;
    text-align: center;
    vertical-align: middle;
    background-color: #f2f3f5;
    border: none;
  }
  .fix {
    width: 375px;
    height: 66px;
    position: fixed;
    left: 0;
    bottom: 50px;
    background-color: #fff;
    padding: 0 16px;
    display: flex;
    box-sizing: border-box;
    align-items: center;
  }
  .fix .check {
    width: 62px;
    height: 100%;
    font-size: 7px;
    color: #323233;
  }
  .fix .allprice {
    width: 177px;
    height: 23px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: 15px;
  }
  .fix .bar-total {
    width: 42px;
    height: 18.4px;
    font-size: 14px;
    color: #323233;
  }
  .fix .bar-price {
    font-size: 20px;
    color: #1ba784;
    font-weight: 600;
  }
  .bar-price span {
    font-size: 12px;
    margin-right: 2px;
  }
  .fix button {
    width: 110px;
    height:40px;
    border: none;
    color: #f2f3f5;
    text-align: center;
    line-height: 40px;
    background-color: #1ba784;
    border-radius: 20px;
    font-size: 3.73vw;
  }
  </style>